<template>
    <div style="background-color: #221f23;">
        <div class="footer">
            <div class="footer-service">
                <ul class="service-list" style="background-color: #221f23">
                    <li>
                        <a href="#">
                            <i class="iconfont icon-weixiufuwu"></i>
                            <span>预约教程服务</span>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <i class="iconfont icon-qitianwuliyoutuihuan"></i>
                            <span>七天无理由退课</span>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <i class="iconfont icon-tianbaotui"></i>
                            <span>15天免费换课</span>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <i class="iconfont icon-lihe"></i>
                            <span>满69元送课程</span>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <i class="iconfont icon-wangdianchaxun"></i>
                            <span>520余家售后网点</span>
                        </a>
                    </li>
                </ul>
            </div>
            <div class="footer-links">
                <div class="links-left">
                    <dl>
                        <dt>帮助中心</dt>
                        <dd><a href="#">账户管理</a></dd>
                        <dd><a href="#">购物指南</a></dd>
                        <dd><a href="#">订单操作</a></dd>
                    </dl>
                    <dl>
                        <dt>服务支持</dt>
                        <dd><a href="#">售后政策</a></dd>
                        <dd><a href="#">自助服务</a></dd>
                        <dd><a href="#">相关下载</a></dd>
                    </dl>
                    <dl>
                        <dt>线下门店</dt>
                        <dd><a href="#">舞蹈之家</a></dd>
                        <dd><a href="#">服务网点</a></dd>
                        <dd><a href="#">授权体验店/专区</a></dd>
                    </dl>
                    <dl>
                        <dt>关于小米</dt>
                        <dd><a href="#">了解舞蹈</a></dd>
                        <dd><a href="#">加入舞蹈</a></dd>
                        <dd><a href="#">投资者关系</a></dd>
                        <dd><a href="#">企业社会责任</a></dd>
                        <dd><a href="#">廉洁举报</a></dd>
                    </dl>
                    <dl>
                        <dt>关注我们</dt>
                        <dd><a href="#">新浪微博</a></dd>
                        <dd><a href="#">官方微信</a></dd>
                        <dd><a href="#">联系我们</a></dd>
                        <dd><a href="#">公益基金会</a></dd>
                    </dl>
                    <dl>
                        <dt>帮助中心</dt>
                        <dd><a href="#">F 码通道</a></dd>
                        <dd><a href="#">礼物码</a></dd>
                        <dd><a href="#">防伪查询</a></dd>
                    </dl>
                </div>
                <div class="links-right">
                    <div class="line"></div>
                    <span class="telephone">
                    150-7007-3165
                </span>
                    <span class="time">
                    8:00-18:00 (仅收市话费)
                </span>
                    <a href="#" class="customer">
                        <i class="iconfont icon-shouji"></i>
                        <small>人工客服</small>
                    </a>
                    <span class="wechat">
                    <small>关注舞蹈:</small>
                    <i class="iconfont icon-xinlangweibo"></i>
                    <i class="iconfont icon-weiboweixin"></i>
                </span>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>

</script>

<style scoped lang="less">
.footer{
    margin: 0 auto;
    width: 1200px;
    height: 333px;
    display: flex;
    flex-direction: column;
    .footer-service{
        height: 80px;
        background-color: rgb(255, 255, 255);
        border-bottom: 1px solid #d9d9d9;
        .service-list{
            height: 80px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            li{
                a{  display: block;
                    padding: 0 45px;
                    text-decoration: none;
                    font-size: 18px;
                    color: #b1b5c1;
                    border-right: 1px solid #d9d9d9;
                    transition: 0.3s;
                    i{
                        font-size: 24px;
                    }
                }
            }
            li:hover a{
                color: #ff6700;
            }
            li:last-child a{
                border-right: none;
            }
        }
    }
    .footer-links{
        width: 100%;
        height: 100%;
        padding: 40px 0;
        // background-color: rgb(255, 255, 255);
        display: flex;
        .links-left{
            width: 956px;
            display: flex;
            dl{
                width: 160px;
                // background-color: #ff6700;
                dt{
                    font-size: 14px;
                    color: #b1b5c1;
                    margin-bottom: 20px;
                }
                dd{
                    margin-bottom: 10px;
                    a{
                        text-decoration: none;
                        font-size: 12px;
                        color: #b1b5c1;
                        
                    }
                }
                dd:hover a{
                    color: #ff6700;
                }
            }
        }
    }
    .links-right{
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding-top: 1px;
        position: relative;
        .line{
            position: absolute;
            width: 1px;
            height: 115px;
            background-color: #d9d9d9;
            top: 1px;
            left: -1px;
        }
        .telephone{
            font-size: 22px;
            color: #ff6700;
            margin-bottom: 8px;
        }
        .time{
            font-size: 12px;
            margin-bottom: 8px;
            color: #616161;
        }
        .customer{
            width: 120px;
            height: 30px;
            border: 1px solid #ff6700;
            text-decoration: none;
            color: #ff6700;
            line-height: 30px;
            text-align: center;
            margin-bottom: 10px;
            transition: 0.3s;
        }
        .customer:hover{
            color: #fff;
            background-color: #ff6700;
        }
        .wechat{
            color: #b1b5c1;
            font-size: 12px;
            .iconfont{
                cursor:pointer;
                font-size: 20px;
                font-weight: bolder;
            }
            .iconfont:hover{
                color: #ff6700;
            }
            .icon-xinlangweibo{
                margin: 0 5px 0 8px;
            }
        }
    }
}

</style>
